<template>
    <div class="layout-padding">
        <splitpanes horizontal>
            <pane size="50">
                <div class="layout-padding-auto layout-padding-view">
                    <splitpanes>
                        <pane size="32" style="box-sizing: border-box;overflow: hidden">
                            <div style="line-height: 20px;display: flex;align-items: center;font-size: 14px">
                              <el-icon style="color:#188eea;font-size: 20px">
                                  <Box />
                              </el-icon>
                              <span class="ml-0.5"> {{ $t('dailyDeliveryData.shippedOrderInformation') }} </span>
                            </div>
                            <div class="layout-padding-auto layout-padding-view" style="flex: 1;display: flex;flex-direction: column">
                                <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: -10px;font-size: 12px">
                                    <el-tab-pane name="first">
                                        <template #label>
                                            <el-icon>
                                                <TakeawayBox />
                                            </el-icon>
                                            <span class="ml-0.5"> {{ $t('dailyDeliveryData.ordersShippedToday') }} </span>
                                        </template>
                                    </el-tab-pane>
                                    <el-tab-pane name="sercond">
                                        <template #label>
                                            <el-icon>
                                                <Reading />
                                            </el-icon>
                                            <span class="ml-0.5"> {{ $t('dailyDeliveryData.summaryOfOrdersShipped') }}
                                            </span>
                                        </template>
                                    </el-tab-pane>
                                </el-tabs>
                                <today ref="locationRef" v-if="activeName === 'first'" style="flex: 1"/>
                                <chars ref="locationRef" v-if="activeName === 'sercond'" />
                            </div>
                        </pane>
                        <pane size="68">
                          <div style="line-height: 20px;display: flex;align-items: center;font-size: 14px">
                            <el-icon style="color:#188eea;font-size: 20px">
                                <CreditCard />
                            </el-icon>
                            <span class="ml-0.5"> {{ $t('dailyDeliveryData.ShipmentInformationToBeSent') }} </span>
                          </div>
                            <div class="layout-padding-auto layout-padding-view" style="flex: 1;display: flex;flex-direction: column">
                                <!--查询结果的列表-->
                                <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
                                    style="width: 100%;height: 85%" :cell-style="tableStyle.cellStyle" stripe
                                    :header-cell-style="tableStyle.headerCellStyle">
                                    <el-table-column prop="dnCode" :label="$t('dailyDeliveryData.dnCode')" width="200px" />
                                    <el-table-column prop="dnLine" :label="$t('dailyDeliveryData.dnLine')" width="120px" />
                                    <el-table-column prop="salesOrderCode" :label="$t('dailyDeliveryData.salesOrderCode')"
                                        width="200px" />
                                    <el-table-column prop="materialCode" :label="$t('dailyDeliveryData.materialCode')" />
                                    <el-table-column prop="salesQty" :label="$t('dailyDeliveryData.salesQty')">
                                        <template #default="scope">
                                            <!--根据不同的状态选择不同的颜色的tag-->
                                            <el-tag size="large" type="">
                                                {{ scope.row.salesQty }}
                                            </el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="scanQty" :label="$t('dailyDeliveryData.scanQty')">
                                        <template #default="scope">
                                            <!--根据不同的状态选择不同的颜色的tag-->
                                            <el-tag size="large" type="success">
                                                {{ scope.row.scanQty }}
                                            </el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="unShippedQty" :label="$t('dailyDeliveryData.unShippedQty')">
                                        <template #default="scope">
                                            <!--根据不同的状态选择不同的颜色的tag-->
                                          <el-tag size="large" type="warning">
                                                {{ scope.row.unShippedQty }}
                                            </el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="deliveryDate" :label="$t('dailyDeliveryData.deliveryDate')" />
                                  <el-table-column prop="delayDays" :label="$t('dailyDeliveryData.isDelay')">
                                        <template #default="scope">
                                            <!--根据不同的状态选择不同的颜色的tag-->
                                          <el-tag size="large" :type="scope.row.delayDays <= 0 ? 'info' : 'danger'">
                                            {{ scope.row.delayDays }}
                                            </el-tag>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                                    v-bind="state.pagination" />
                            </div >
                        </pane>
                    </splitpanes>
                </div>
            </pane>
            <pane size="50" >
               <div style="line-height: 35px;display: flex;align-items: center;font-size: 14px">
                 <el-icon style="color:#188eea;font-size: 20px">
                   <calendar />
                 </el-icon>
                 <span class="ml-0.5" style="line-height: 30px"> {{ $t('dailyDeliveryData.deliveryNoticeLineInformation') }} </span>
               </div>
                <div class="layout-padding-auto layout-padding-view" style="flex: 1">
                    <dnLineTable ref="dataFormRef" />
                </div>
            </pane>
        </splitpanes>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import type {TabsPaneContext} from 'element-plus'
import today from "/src/views/report/dailyDeliveryData/todayindex.vue"
import chars from "/src/views/report/dailyDeliveryData/charsindex.vue"
import dnLineTable from "/src/views/report/dailyDeliveryData/dnLineTable.vue"
import {BasicTableProps, useTable} from '/@/hooks/table';
import {getUnShippedList} from "/@/api/platform/report/dailyDeliveryData"
import {useI18n} from 'vue-i18n';

const { t } = useI18n();
// 变量
const queryRef = ref
const locationRef = ref()
const activeName = ref('first')
const dataFormRef = ref();

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: getUnShippedList
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
    activeName.value = tab.props.name
}
const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)
</script>

